<template>
    <div class="footer">
        <van-tabbar v-model="active">
            <van-tabbar-item icon="wap-home-o" @click="changeRoute('/goods', 0)">
                首页</van-tabbar-item>
            <van-tabbar-item icon="info-o" @click="changeRoute('/cart', 1)">
                消息</van-tabbar-item>
            <van-tabbar-item icon="user-o" @click="changeRoute('/user', 2)">
                我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: 'PageFooter',
  data(){
    return{
      active:-1
    }
  },
  methods: {
    changeRoute(routeName, barNum){
      if(this.$route.path!=routeName){
        this.$router.push(routeName);
        this.active=barNum;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .footer{
    height: 6vh;
  }
</style>
